<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入整个common页面 -->
    <div th:replace="common/common :: head">
    </div>
</head>
<body>

`<div id="toolbar">
    <form class="form-inline" role="form">
       <!-- <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名">
    </div>
        <div class="form-group">
            <label class="sr-only" for="depId">部门查询</label>
            <select class="form-control" name="depId">
                <option value="-1">部门查询</option>
                <option value="1">市场部</option>
                <option value="2">销售部</option>
                <option value="3">资源部</option>
            </select>
        </div>
        <button type="button" class="btn btn-default" onclick="getData()">搜索</button>-->
        <div shiro:hasPermission="add:add">
            <button type="button" class="btn btn-default" onclick="insertBatch()">增加</button>
            <a href="/auth/logout">点击退出</a>
        </div>
       <!-- <button type="button" class="btn btn-default" onclick="insertBatch()">增加</button>-->
    </form>

</div>
<table id="table"></table>
</body>
</html>

<script>
    $('#table').bootstrapTable({
        url: '/tPersonController/getCarAllInfo',
        method: 'post',//请求方式
        contentType: "application/x-www-form-urlencoded",//如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。这时就需要在bootstrap-table的参数列表中显式设置：
        toolbar: '#toolbar',    //工具按钮用哪个容器
        striped: true,//是否显示行间隔色
        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,//是否显示分页（*）
        sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,//初始化加载第一页，默认第一页,并记录
        pageSize: 3,//每页的记录行数（*）
        pageList: [3, 6, 9],//可供选择的每页的行数（*）
        showColumns: true,//是否显示所有的列（选择显示的列）
        showRefresh: true,//是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        detailView: true,                  //是否显示父子表
        //得到查询的参数
        queryParams : function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {
                pageSize: params.limit,                         //每页条数
                pageNum: (params.offset / params.limit) + 1,      /* 当前页数 */
                //条件查询 将数据传送到后台
        //        carName:$("#carName").val(),
         //       carType : $("[name=carType]").val(),
           /*     starTime:$("#starTime").val(),
                endTime:$("#endTime").val(),*/
            };
            return temp;
        },
        columns: [
            {
                checkbox: true,
                visible: true                  //是否显示复选框
            }, {
                field: 'pid',
                title: 'ID'
            }, {
                field: 'pname',
                title: '用户名'
            }, {
                field: 'pwd',
                title: '密码',
          /*      formatter : function(value,row,index){
                    if(value ==1){
                        return "男";
                    }else if(value ==2){
                        return "女";
                    }
                }*/
            }, {
                field: 'salt',
                title: '多余字段'
            },{
                title: '操作',
                formatter : function(value, row, index){
                    var pid = row.pid;
                    return '<a class="btn btn-danger1" href="javascript:deleteInfo(' + pid + ')"><span class="glyphicon glyphicon-trash"></span></a>' +
                        '<a class="btn btn-info1" href="javascript:updateInfo(' + pid + ')"><span class="glyphicon glyphicon-edit"></span></a>';

                }
            }
        ]
    });

    //刷新table   用户删除修改增加 关闭模态窗口时刷新table所用   也就是刷新上面的js代码
    function getData(){
        $('#table').bootstrapTable("refresh");
    }


    //增加
    function insertBatch(){
        BootstrapDialog.show({
            title: '增加',
            message: $('<div></div>').load('/tPersonController/insertInfo'),
            /* type: BootstrapDialog.TYPE_SUCCESS, */
            size: BootstrapDialog.SIZE_SMALL,
            buttons: [{
                label: '取消',
                cssClass : "btn btn-info",
                action: function (dialog) {
                    dialog.close();
                }
            }, {
                label: '确定',
                cssClass : "btn btn-info",
                action: function (dialog) {


                    var pname = $("#pname").val();
                    var pwd = $("#pwd").val();
                    var salt = $("#salt").val();
                    var  roleChecked = $("[name = 'roleId']");


                    var roleIds = [];
                    $(roleChecked).each(function(i,e){
                        if($(e).prop("checked")){
                            roleIds.push($(e).val())
                        }
                    })

                   if(roleIds.length == 0){
                        alert("请选择角色")
                        return;
                    }

                    $.ajax({
                        url:"/tPersonController/addById",
                        data:{pname:pname,pwd:pwd,salt:salt,roleIds:roleIds},
                        dataType:"text",
                        type:"post",
                        async:true,
                        success:function(result){
                            if(result == "1"){
                                dialog.close();
                                toastr.success("增加成功");
                                getData();
                            }else{
                                toastr.error("增加失败");
                            }

                        },
                        error:function(){
                            toastr.error("系统异常,请联系管理员");
                        }
                    })

                }
            }]
        });
    }

    //修改
    function updateInfo(pid){
        BootstrapDialog.show({
            title: '修改',
            message: $('<div></div>').load('/tPersonController/updateInfo/'+pid),
            /* type: BootstrapDialog.TYPE_SUCCESS, */
            size: BootstrapDialog.SIZE_SMALL,
            buttons: [{
                label: '取消',
                cssClass : "btn btn-info",
                action: function (dialog) {
                    dialog.close();
                }
            }, {
                label: '确定',
                cssClass : "btn btn-info",
                action: function (dialog) {

                    var pname = $("#pname").val();
                   var salt = $("#salt").val();

                    var  roleChecked = $("[name = 'roleId']");


                    var roleIds = [];
                    $(roleChecked).each(function(i,e){
                        if($(e).prop("checked")){
                            roleIds.push($(e).val())
                        }
                    })

                    if(roleIds.length == 0){
                        alert("请选择角色")
                        return;
                    }
                    /* alert(roleIds)*/
                    $.ajax({
                        url:"/tPersonController/updateById",
                        data:{pname:pname,salt:salt,roleIds:roleIds,pid:pid},
                        dataType:"text",
                        type:"post",
                        async:true,
                        success:function(result){
                            if(result == "1"){
                                dialog.close();
                                toastr.success("修改成功");
                                getData();
                            }else{
                                toastr.error("修改失败");
                            }

                        },
                        error:function(){
                            toastr.error("系统异常,请联系管理员");
                        }
                    })

                }
            }]
        });
    }

    function deleteInfo(pid){
        if(confirm("是否删除角色")){
            $.ajax({
                url:"/tPersonController/deleteById/"+pid,
                data:{},
                dataType:"text",
                type:"post",
                async:true,
                success:function(result){
                    if(result == "1"){
                        toastr.success("删除成功");
                        getData();
                    }else{
                        toastr.error("删除失败");
                    }

                },
                error:function(){
                    toastr.error("系统异常,请联系管理员");
                }
            })
        }
    }

</script>